<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import {getUserListAPI, searchUserAPI, deleteUserAPI} from "@/api/user.ts";
import {Edit, Delete, InfoFilled} from "@element-plus/icons-vue";
import {ElMessage, ElNotification} from "element-plus";
import {formattedDate} from "@/utils/formatDate.ts";

const userList = ref()
const userNumber = ref(0)

const phoneForm = reactive({
  phone: '15837520156'
})

const pagerParams = reactive({
  limit: 6,
  page: 1
})

// 获取用户列表
const getUserList = async (params) => {
  const res = await getUserListAPI(params)
  userList.value = res.data.users
  userNumber.value = res.data.total
}

// 查询用户
const searchUser = async () => {
  const res = await searchUserAPI(phoneForm)
  userList.value = res.data
}

// 删除用户
const deleteUser = async (row) => {
  const res = await deleteUserAPI(row._id)
  ElMessage({
    type: 'success',
    message: res.message
  })
  await getUserList(pagerParams)
}

// 重置列表
const resetList = async () => {
  await getUserList(pagerParams)
}

// 换页
const changePage = async () => {
  await getUserList(pagerParams)
}

// 编辑课程
const EditUser = () => {
  ElNotification({
    title: 'Warning',
    message: '为减缓服务器压力，暂关闭编辑接口及数据回显',
    type: 'warning',
  })
}

onMounted(() => {
  getUserList(pagerParams)
})
</script>

<template>
  <!--  手机号搜索用户-->
  <el-card class="card-search">
    <div class="card-search-box row">
      <div class="card-search-input">
        <el-form
            ref="ruleFormRef"
            label-width="60px"
            class="demo-ruleForm"
            :model="phoneForm"
            status-icon
        >
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="phoneForm.phone" placeholder="请输入手机号"/>
          </el-form-item>
        </el-form>
      </div>
      <div class="card-search-btn">
        <el-button type="primary" @click="searchUser">搜索</el-button>
        <el-button @click="resetList">重置</el-button>
      </div>
    </div>
  </el-card>

  <!--  用户列表-->
  <el-card class="card-user">
    <div class="card-user-list column">

      <div class="card-user-list-table">
        <el-table
            border
            ref="multipleTableRef"
            :data="userList"
            style="width: 100%"
        >
          <el-table-column prop="username" align="center" label="用户名"/>
          <el-table-column prop="phone" align="center" label="手机号"/>
          <el-table-column prop="articleId" align="center" label="文章量" width="100">
            <template #default="{row}">
              {{ row.articleId.length }}
            </template>
          </el-table-column>
          <el-table-column prop="followers" align="center" label="粉丝量" width="100">
            <template #default="{row}">
              {{ row.followers.length }}
            </template>
          </el-table-column>
          <el-table-column prop="updatedAt" align="center" label="创建时间">
            <template #default="{row}">
              {{ formattedDate(row.updatedAt) }}
            </template>
          </el-table-column>
          <el-table-column prop="isActive" align="center" label="活跃" width="100">
            <template #default="{row}">
              {{ row.isActive ? '活跃' : '不活跃' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="控制" width="260">
            <template #default="{row}">
              <div class="operator-btn">
                <el-button type="primary" size="default" @click="EditUser" :icon="Edit as any" circle/>
                <el-popconfirm
                    width="200"
                    @confirm="deleteUser(row)"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    :icon="InfoFilled as any"
                    icon-color="#f36b6c"
                    title="您确定删除此用户吗?"
                >
                  <template #reference>
                    <el-button type="danger" size="default" :icon="Delete as any" circle/>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pager-box center">
      <el-pagination background layout="prev, pager, next"
                     :page-size="6"
                     :total="userNumber"
                     v-model:current-page="pagerParams.page"
                     @current-change="changePage"
      />
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.card-search {
  height: 80px;
  box-sizing: border-box;
  padding: 0 50px;

  .card-search-box {
    display: flex;
    justify-content: space-between;

    .card-search-input {
      width: 300px;

      .el-form-item {
        margin: 0;
      }
    }

    .el-button {
      width: 100px;
    }
  }
}

.card-user {
  margin-top: 20px;
  padding: 0 50px;

  .card-user-list {

    .card-user-list-title {

      display: flex;
      justify-content: flex-end;
    }

    .card-user-list-table {
      margin-top: 20px;
    }
  }

  .pager-box {
    height: 100px;
  }
}
</style>